<template>
<!-- content VIEW -->
    <div class="Home">
        <div class="cont mt-20 pt-10">
            <div class="cont row-md-12">
                <!-- for this -->
                <div class="contents flex pl-10 pr-20 pt-8 pb-8 radius-5" v-for="(item,index) in list" :class="[index > 0 ? 'mt-10' : '' ]" :key="item" @click="content(index)">
                    <div class="left-img row-3 post-r row-md-5">
                        <img class="show row-12 radius-5" :src=" item.cover " alt="">
                        <p class="post-a text-white pt-5 pb-5 pr-10 pl-10 radius-5">{{item.covercreatedTime}}</p>
                    </div>
                    <div class="cont-right row-9 pl-20 pt-20 row-md-7">
                        <h4 class="font-20 fw text-cut">{{item.title}}</h4>
                        <p class="font-16 mt-10 tj">{{item.text}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import parsing from '@/assets/js/parsing'
export default {
    data(){
        return{
            list:[],
        }
    },
    created(){
        this.list = parsing.GenerateMdList();
        console.log(this.list);
    },
    methods:{
        content(idx){
            this.$router.push({
                path: '/content',
                query:{
                    id:idx
                }
            })
        }
    }
}
</script>

<style scoped>

    .contents{
        cursor: pointer;
    }

    .contents:hover .left-img{
        transform: scale(1.1);
    }

    .left-img p{
        bottom: 0px;
        right: 0px;
        background: rgba(0,0,0,0.3);
    }

    .contents:hover h4{
        color: var(--blue);
    }

    .cont-right h4{
        color: var(--black);
    }

    .cont-right p{ 
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: var(--darkGray);
    }

    .contents{
        background: white;
    }

    
    @media screen and (max-width: 520px) {
        .cont-right{
            padding-top: 5px;
            padding-left: 10px;
        }

        .cont-right h4{
            font-size: 0.8rem;
        }

        .cont-right p{
            font-size: 0.5rem;
            margin-top: 5px;
        }
    }

</style>